<template>
    <el-drawer
    :title="this.$t('buttons.uploadMap')"
    :visible.sync="drawer"
    :close-on-press-escape="false"
    custom-class="uploadMap"
    :wrapperClosable="closable"
    :show-close="showClose"
    :direction="direction"
    @close="closeDrawer">
        <div class="uploadBox">
            <el-upload
            class="upload-demo"
            drag
            action=""
            accept=".png"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :on-success="handleAvatarSuccess"
            :on-error="handleAvatarError"
            :on-change="getFile"
            :auto-upload="false"
            list-type="picture"
            :limit="limit"
            >
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip" slot="tip">只能上传png文件</div>
            </el-upload>
            <el-radio-group v-model="radio" size="small">
                <el-radio-button label="map"></el-radio-button>
                <el-radio-button label="map_edit"></el-radio-button>
            </el-radio-group>
            <div class="flex formBtns">
                <el-button type="primary" @click="submitUploadBtn(true)">{{ this.$t("buttons.submit")}}</el-button>
            </div>
        </div>
    </el-drawer>
</template>

<script>
import { showUploadMap, uploadMap } from '../js/map';
export default {
    name: 'mapUpload',
    components:{
        
    },
    data(){
        return{
            drawer: this.$store.state.uploadMap,
            direction: 'btt',
            closable: true,
            showClose: false,

            limit: 1,//上传最大张数
            radio: "map"
        }
    },
    methods:{
        //上传文件时的钩子
        handlePreview(file){
            
        },

        //移除文件时的钩子
        handleRemove(file, fileList){
            
        },

        //文件上传成功时的钩子
        handleAvatarSuccess(res, file, fileList){
            
        },

        //上传失败钩子
        handleAvatarError(err, file, fileList){
            
        },

        //获取file
        async getFile(file, fileList) {
            await this.getImgSize(file);
            await this.getBase64(file.raw).then(res => {
                this.base64Data = res;
            });
        },

        //获取图片宽高
        getImgSize(info){
            let that = this;
            let imgObj = new Image();
            imgObj.src = info.url;
            imgObj.onload = function(){
                that.mapWidth = imgObj.width;
                that.mapHeight = imgObj.height;
            }
        },

        getBase64(file) {
          return new Promise(function(resolve, reject) {
              let reader = new FileReader();
              let imgResult = "";
              reader.readAsDataURL(file);
              reader.onload = function() {
                  imgResult = reader.result;
              };
              reader.onerror = function(error) {
                  reject(error);
              };
              reader.onloadend = function() {
                  resolve(imgResult);
              };
            });
        },
        
        //上传、关闭上传图片
        async submitUploadBtn(type) {
            let that = this;
            switch(type){
                case true:
                    if(that.radio == ""){
                        that.$message.error('请选择图片类型！');
                        return
                    }
                    if(!that.base64Data){
                        that.$message.error('请上传图片！');
                        return
                    }
                    await uploadMap({base64: that.base64Data, type: that.radio, width: that.mapWidth, height: that.mapHeight});
                    that.dialogVisible = false;
                    break;
                case false:
                    that.dialogVisible = false;
                    break; 
                default:
                    that.dialogVisible = false;
            }
            that.drawer = false;
            
        },

        //关闭模态框
        closeDrawer: function(){
            showUploadMap(false);
        }
    },

    //属性监听
    watch:{
       "$store.state.uploadMap": function(val){
           this.drawer = val;
        }
    }

}
</script>

<style scoped lang="less">
.uploadBox{
    width: 100%;
    padding: 0 15px;
    .formBtns{
        padding: 0 5px;
        margin-top: 25px;
        button{
            width: 100%;
        }
    }
}


</style>